﻿<!--

 * @Description: 实时监测

 * @Author: Ronda

 * @Date: 2022-02-16 09:30:08

 * @LastEditors: 韩政轩 2191277604@qq.com

 * @LastEditTime: 2025-09-25 16:16:43

-->

<template>

  <div class="container">

    <div class="tree-container">

      <el-input 

        placeholder="输入关键字进行过滤" 

        v-model="filterText" 

        clearable 

        size="mini"

        class="custom-input"

      ></el-input>

      <el-tree

        @node-click="handleNodeClick"

        class="filter-tree"

        :data="engData"

        :props="defaultProps"

        default-expand-all

        :filter-node-method="filterNode"

        ref="tree"

      >

      </el-tree>

    </div>

    <div class="chart-container">

      <!-- 标签页组件 - 点击哪个标签，哪个标签下方显示下划线 -->

      <el-tabs v-model="activeTab" class="custom-tabs" tab-position="top">

        <el-tab-pane label="tsp" name="tsp">

          <div class="chart-content custom-chart-content">

            <div v-if="selectedNodeData && selectedNodeData.tsp">

              {{ selectedNodeData.label }} 的 tsp 数据：{{ selectedNodeData.tsp }}

            </div>

            <div v-else class="red-center-text">请选择设备进行查看</div>

          </div>

        </el-tab-pane>

        <el-tab-pane label="pm10" name="pm10">

          <div class="chart-content custom-chart-content">

            <div v-if="selectedNodeData && selectedNodeData.pm10">

              {{ selectedNodeData.label }} 的 pm10 数据：{{ selectedNodeData.pm10 }}

            </div>

            <div v-else class="red-center-text">请选择设备进行查看</div>

          </div>

        </el-tab-pane>

        <el-tab-pane label="pm2.5" name="pm2_5">

          <div class="chart-content custom-chart-content">

            <div v-if="selectedNodeData && selectedNodeData.pm2_5">

              {{ selectedNodeData.label }} 的 pm2.5 数据：{{ selectedNodeData.pm2_5 }}

            </div>

            <div v-else class="red-center-text">请选择设备进行查看</div>

          </div>

        </el-tab-pane>

        <el-tab-pane label="温度" name="temperature">

          <div class="chart-content custom-chart-content">

            <div v-if="selectedNodeData && selectedNodeData.temperature">

              {{ selectedNodeData.label }} 的温度数据：{{ selectedNodeData.temperature }}

            </div>

            <div v-else class="red-center-text">请选择设备进行查看</div>

          </div>

        </el-tab-pane>

        <el-tab-pane label="湿度" name="humidity">

          <div class="chart-content custom-chart-content">

            <div v-if="selectedNodeData && selectedNodeData.humidity">

              {{ selectedNodeData.label }} 的湿度数据：{{ selectedNodeData.humidity }}

            </div>

            <div v-else class="red-center-text">请选择设备进行查看</div>

          </div>

        </el-tab-pane>

      </el-tabs>

    </div>

  </div>

</template>



<script>

export default {

  data() {

    return {

      filterText: "",

      engData: [

        {

          label: "山西农大主体育场工程",

          children: [

            {

              label: "三号设备",

              tsp: "0",

              pm10: "0",

              pm2_5: "0",

              temperature: "0",

              humidity: "0",

            },

          ],

        },

        {

          label: "太原理工大学一号教学楼工程",

          children: [

            {

              label: "一号设备",

              tsp: "0",

              pm10: "0",

              pm2_5: "0",

              temperature: "0",

              humidity: "0",

            },

            {

              label: "二号设备",

              tsp: "0",

              pm10: "0",

              pm2_5: "0",

              temperature: "0",

              humidity: "0",

            },

          ],

        },

        {

          label: "中北大学",

        },

        {

          label: "兰州理工大学",

          children: [

            {

              label: "四号设备",

              tsp: "0.11",

              pm10: "24",

              pm2_5: "13",

              temperature: "25",

              humidity: "61",

            },

            {

              label: "五号设备",

              tsp: "0.11",

              pm10: "24",

              pm2_5: "13",

              temperature: "25",

              humidity: "61",

            },

          ],

        },

      ],

      defaultProps: {

        children: "children",

        label: "label",

      },

      activeTab: "tsp", // 默认激活的标签

      selectedNodeData: null,

    };

  },

  watch: {

    // 监听搜索框输入，实时过滤树节点

    filterText(val) {

      this.$refs.tree.filter(val);

    },

  },

  methods: {

    // 树节点过滤方法

    filterNode(value, data) {

      if (!value) return true;

      return data.label.indexOf(value) !== -1;

    },

    // 处理树节点点击事件

    handleNodeClick(data) {

      this.selectedNodeData = data;

    },

  },

};

</script>



<style scoped>

.container {

  display: flex;

  height: 100vh;

}

.tree-container {

  width: 220px;

  border-right: 1px solid #e6e6e6;

  padding: 10px;

}

.chart-container {

  flex: 1;

  padding: 20px;

}

.chart-content {

  margin-top: 20px;

  padding: 15px;

  min-height: 400px;

  background-color: #ffffff;

  border-radius: 4px;

}



/* 搜索框样式 */

.custom-input {

  width: 100%;

  margin-bottom: 10px;

  border: none;

}



/* 标签页核心样式 - 实现点击标签显示下划线 */

.custom-tabs {

  --el-tabs-border-color: transparent;

}



/* 下划线样式 - 只在激活标签下方显示 */

::v-deep .el-tabs__active-bar {

  height: 2px !important;

  background-color: #4fbc8d !important;

  transition: all 0.3s ease; /* 下划线切换动画 */

}



/* 标签项基础样式 */

::v-deep .el-tabs__item {

  border: none !important;

  margin-right: 20px;

  padding: 0 5px;

  height: 36px;

  line-height: 36px;

}



/* 激活标签的文字颜色 */

::v-deep .el-tabs__item.is-active {

  color: #4fbc8d !important;

  font-weight: 500;

}



/* 标签导航容器样式 */

::v-deep .el-tabs__nav-wrap {

  border-bottom: 1px solid #e5e7eb !important;

}



/* 鼠标悬停效果 */

::v-deep .el-tabs__item:hover {

  color: #4fbc8d !important;

}



/* 新增的文字变红且居中样式 */

.red-center-text {

  color: red;

  text-align: center;

}

</style>